@extends('admin.layout.base')

@section('content')
    <style>
        .layui-colla-title{
            float: left;
        }
        .cat-title{
            height: 42px;line-height: 42px; background-color: #f2f2f2;
        }
        .layui-colla-title{
            font-weight: bold; font-size: 15px
        }
        .layui-show{
            padding: 5px 15px;
        }
        .layui-form-item{
            margin-bottom: 0px;
        }
        .layui-form-label{
            width: 160px; padding: 0px; text-align: left;
        }
    </style>
    <div class="layui-card-body">
        <div class="layui-form" lay-filter="">
            <form class="layui-form" data-url="{{route('role.power')}}">
                {{csrf_field()}}
                <input type="hidden" name="id" value="{{$role_id}}">
                <div class="layui-collapse" lay-filter="test">
                    @foreach($data as $item)
                    <div class="layui-colla-item">
                        <h2 class="layui-colla-title">{{$item['title']}}</h2>
                        <div class="cat-title father">
                            <input type="checkbox" name="power[]" value="{{$item['id']}}" {{$item['checked']?'checked':''}} lay-filter="father" lay-skin="primary">
                        </div>
                        @if($item['children'])
                            @foreach($item['children'] as $value)
                            <div class="layui-colla-content layui-show">
                                <div class="layui-form-item">
                                    <span class="layui-form-label son">
                                        <input type="checkbox" name="power[]" value="{{$value['id']}}" {{$value['checked']?'checked':''}} title="{{$value['title']}}" lay-filter="son" lay-skin="primary">
                                    </span>
                                    <div class="layui-input-block">
                                        @if($value['children'])
                                            @foreach($value['children'] as $val)
                                            <input type="checkbox" name="power[]" value="{{$val['id']}}" {{$val['checked']?'checked':''}} title="{{$val['title']}}" lay-filter="grandson" lay-skin="primary">
                                            @endforeach
                                        @endif
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        @endif
                    </div>
                    @endforeach
                </div>

                <div style="height: 20px"></div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn layui-btn-sm" lay-submit lay-filter="submit">提 交</button>
                        <button class="layui-btn layui-btn-primary layui-btn-sm" type="reset">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('script')
    <script>
        layui.use(['jquery', 'form', 'layer'], function () {
            var $ = layui.jquery;
            var form = layui.form;
            var layer = layui.layer;

            form.on('checkbox(father)', function(data){
                var that = $(this).parent().parent().find('input');
                if (data.elem.checked) {
                    that.prop("checked", true);
                }else{
                    that.removeAttr("checked");//取消全选
                };
                form.render('checkbox');
            });

            form.on('checkbox(son)', function(data){
                var that = $(this).parent().parent().find('input');
                if (data.elem.checked) {
                    that.prop("checked", true);
                }else{
                    that.removeAttr("checked");//取消全选
                };
                form.render('checkbox');

                isCheck();//父及选中处理
            });

            form.on('checkbox(grandson)', function(){
                var brothers = $(this).parent().find('input');
                var son = $(this).parent().parent().find('.son input');
                isCheckedAll(brothers, son);//控制二级
            });

            //检测是否有选中并控制二级和
            function isCheckedAll(brothers, item){
                var isChecked = false;
                brothers.each(function () {
                    if ($(this).is(':checked') == true) {
                        isChecked = true;
                        return false;
                    }
                });
                if(isChecked){
                    item.prop("checked", true);
                }else{
                   // item.removeAttr("checked");
                }
                form.render('checkbox');

                isCheck();//父及选中处理
            }

            //父及选中处理
            function isCheck() {
                $('.layui-colla-item').each(function () {
                    var that = $(this).find('.son input');
                    var isChecked = false;
                    that.each(function () {
                        if (that.is(':checked') == true) {
                            isChecked = true;
                            return false;
                        }
                    });
                    var father = $(this).find('.father input');
                    if (isChecked) {
                        father.prop("checked", true);
                    } else {
                        father.removeAttr("checked");
                    }
                });
                form.render('checkbox');
            }

            form.on('submit(submit)', function (data) {
                var url = $('form').data('url');
                $.ajax({
                    url: url, type: 'post', data: data.field, dataType: "json",
                    success: function (result) {
                        if (result.code === 0) {
                            layer.msg(result.msg, {time: 1000, icon: 6}, function () {
                                //关闭当前弹窗
                                var index = parent.layer.getFrameIndex(window.name);
                                parent.layer.close(index);
                            });
                        } else {
                            layer.msg(result.msg, {time: 2000, icon: 5});
                        }
                    }
                });
                return false;
            });
        });
    </script>
@endsection

